<template>
	<view>
		<uni-card :title="vdata.businessInfo.mchName" :sub-title="vdata.businessInfo.address" :extra="tool.filterDistance(vdata.businessInfo.distance)" :thumbnail="vdata.businessInfo.storeOuterImg||vdata.avatar">
			<text class="uni-body" style="display: block;">联系人: {{vdata.businessInfo.contactName}}</text>
			<view class="item-left">

				<view @click="openMap(vdata.businessInfo.lat, vdata.businessInfo.lng, vdata.businessInfo.address)" style="display: inline-block;margin-right: 26px; margin-left: 10px;">
					<!-- <view class="left-image">
						<image src="../../static/new/user/navigation.png" mode=""></image>
					</view> -->

					<text class="left-text">导航</text>
				</view>
				<view @click="telPhone(vdata.businessInfo.contactTel)" style="display: inline-block;">
					<!-- <view class="left-image">
						<image src="../../static/new/user/tel.png" mode=""></image>
					</view> -->

					<text class="left-text">电话</text>
				</view>
			</view>
			<view class="item-right" @click="collectMch(vdata.businessInfo.isCollect, vdata.businessInfo.mchNo)">
				<view v-if="vdata.businessInfo.isCollect == 1" class="collect">
					<image src="../../static/new/user/collected.png" mode=""></image>
					<text>已收藏</text>
				</view>
				<view v-else class="collect">
					<image src="../../static/new/user/no-collected.png" mode=""></image>
					<text>收藏</text>
				</view>
			</view>

		</uni-card>
	</view>

</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { $collectMch, $cancelCollect } from '@/http/apiManager.js';
	import tool from '@/util/tool.js';
	import noPic from "@/static/user/noPic.png"
	let vdata = reactive({
		avatar: noPic,
		businessInfo: {}
	});

	onLoad(options => {
		// console.log(JSON.parse(options.info),33333);
		vdata.businessInfo = JSON.parse(options.info);
	});
	onShow(() => {

	});
	// 打开的点击事件，传经纬度和地点名
	const openMap = (lat, lng, address) => {
		// 打开第三方 （小程序）
		uni.getLocation({
			type: 'gcj02', //返回可以用于wx.openLocation的经纬度
			success(res) {
				// const latitude = res.latitude
				// const longitude = res.longitude
				const latitude = parseFloat(lat)
				const longitude = parseFloat(lng)
				const name = address
				uni.openLocation({
					latitude,
					longitude,
					name,
					scale: 18
				})
			}
		})
	}
	// var window
	const collectMch = (isCollect, mchNo) => {

		if (isCollect == 1) {
			vdata.businessInfo.isCollect = 0
			$cancelCollect({ mchNo: mchNo }).then(res => {
				// console.log(res.bizData, "res.bizData");
				vdata.userInfo = res.bizData
			});
		} else {
			vdata.businessInfo.isCollect = 1
			$collectMch({ mchNo: mchNo }).then(res => {
				// console.log(res.bizData, "res.bizData");
				vdata.userInfo = res.bizData
			});
		}
	}
	const telPhone = (val) => {

		uni.makePhoneCall({
			// 手机号
			phoneNumber: val,
			// 成功回调
			success: (res) => {},
			// 失败回调
			fail: (res) => {}
		});

	}
</script>

<style scoped lang="scss">
	.item-left {
		display: inline-block;
		width: 40vw;
		margin-top: 10px;

		.left-image {
			width: 60rpx;
			height: 60rpx;
			background-color: #eeeeee;
			border-radius: 30rpx;

		}

		.left-text {
			display: block;
			margin-top: 16rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			position: relative;
			top: 10rpx;
			left: 8rpx;
		}
	}

	.item-right {
		display: inline-block;
		position: relative;
		top: -44rpx;
		left: 150rpx;

		.collect {
			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				position: relative;
				top: -16rpx;
				left: 10rpx;
			}
		}

	}
</style>